import { useState } from "react";

/*
  受控组件：通过 state 和 onChange 事件来收集表单数据（推荐）
*/
export default function App() {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");

  const handleUsernameChange = (e) => {
    // e.target 触发事件目标DOM元素
    setUsername(e.target.value);
  };

  const handlePasswordChange = (e) => {
    // e.target 触发事件目标DOM元素
    setPassword(e.target.value);
  };

  const login = (e) => {
    e.preventDefault();
    console.log(username, password);
  };

  return (
    <form onSubmit={login}>
      <h1>登录</h1>
      {/* 
        在原生DOM事件中：
          input元素的input事件，可以在用户输入内容触发，获取实时输入的内容
          input元素的change事件，失去焦点才会触发
      
        在React合成事件中：
          input元素的onChange事件，相当于原生DOM事件的input事件
      */}
      <div>
        用户名：
        <input type="text" onChange={handleUsernameChange} />
      </div>
      <div>
        密码：
        <input type="password" onChange={handlePasswordChange} />
      </div>
      <button>登录</button>
    </form>
  );
}
